<!-- 特色美食 -->
<template>
	<div>
		<common-header :tittle="tittle" :showmore="true" class="head"></common-header>
		<div class="page-content">

			<div class="box">
				<div>
					<ul class="list">
						<li>
							<span class="imgs"><img src="../../../assets/imgs/banner2.png" alt="" /></span>
							<div class="rg">
								<h3>曼根傣贡稻米</h3>
								<p class="brief">醇香口感 细滑丝腻</p>

								<!--<x-switch title="Full popup" v-model="show1">查看详情</x-switch>-->
							</div>
						</li>
						<li>
							<span class="imgs"><img src="../../../assets/imgs/banner2.png" alt="" /></span>
							<div class="rg">
								<h3>曼根傣贡稻米</h3>
								<p class="brief">醇香口感 细滑丝腻</p>

							</div>
						</li>
						<li>
							<span class="imgs"><img src="../../../assets/imgs/banner2.png" alt="" /></span>
							<div class="rg">
								<h3>曼根傣贡稻米</h3>
								<p class="brief">醇香口感 细滑丝腻</p>

							</div>
						</li>
					</ul>

					<!--<div v-transfer-dom >
						<popup v-model="show1" height="100%" style="z-index: 999;">
							<div class="popup1" >
								<x-switch title="关闭" v-model="show1"></x-switch>
							</div>
						</popup>
					</div>-->
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	import commonHeader from 'common/common-header-back'
	//	import { Popup, XSwitch,TransferDom } from 'vux'
	import {
		Swipe,
		SwipeItem
	} from 'mint-ui';
	export default {
//		directives: {
//			TransferDom
//		},
		data() {
			return {
				show1: false,
				tittle: '特色美食',

			}
		},
		components: {
			commonHeader,
//			Popup,
//			XSwitch,
//			TransferDom

		},
		computed: {

		},

		methods: {

		}
	}
</script>

<style scoped lang="less">
	@import "~styles/index.less";
	@import "~styles/variable.less";
	.header-box {
		z-index: 999;
	}
	
	.weui-switch {
		&:after {
			width: 0 !important;
			height: 0 !important;
		}
	}
	
	.weui-switch:after,
	.weui-switch-cp__box:after {
		background: red !important;
		width: 10px !important;
		height: 10px !important;
	}
	
	.weui-switch:checked,
	.weui-switch-cp__input:checked~.weui-switch-cp__box {
		border-color: red !important;
		background-color: red !important;
	}
	
	.box {
		padding: 30px 15px 0 15px;
		.list {
			width: 100%;
			text-align: left;
			li {
				border-bottom: 1px solid @border-color;
				padding-bottom: 30px;
				margin-bottom: 30px;
				width: 100%;
				display: flex;
				justify-content: flex-start;
				.imgs {
					margin-right: 20px;
					width: 128px;
					height: 75px;
					border-radius: 5px;
					overflow: hidden;
					display: inline-block;
					img {
						width: 100%;
						height: 100%;
					}
				}
				h3 {
					font-size: 15px;
					color: #333;
					font-weight: bold;
					padding-bottom: 12px;
				}
				.brief {
					padding: 0 0 12px 0;
					display: block;
					color: #999999;
					font-size: 12px;
				}
				.detail {
					color: #999999;
					font-size: 12px;
					position: relative;
					&:after {
						position: absolute;
						content: '>';
						width: 4px;
						height: 7px;
						right: 38px;
						top: -7px;
						bottom: 0;
						vertical-align: middle;
						margin: auto;
					}
				}
			}
		}
	}
</style>